<!-- 交付预约申请 -->
<template>
	<view>
		<view class="block__title">交付预约信息</view>
		<!-- <view class="cu-form-group">
			<view class="title">姓名</view>
			<input placeholder="请输入成员姓名" v-model="name"></input>
		</view> -->
		<view class="cu-form-group">
			<view class="title">房屋</view>
			<picker bindchange="PickerChange" :value="homeNumberIndex" :range="bindingHouseList"
				:range-key="'houseNumber'" @change="houseNumber">
				<view class="picker">
					{{bindingHouseList[homeNumberIndex].houseNumber}}
				</view>
			</picker>
		</view>
		<!-- <view class="cu-form-group">
			<view class="title">手机号</view>
			<input placeholder="请输入成员姓名" v-model="phone"></input>
		</view> -->
		<!-- <view class="cu-form-group">
			<view class="title">身份证号</view>
			<input placeholder="请输入身份证号" v-model="idNumber"></input>
		</view> -->
		<view class="cu-form-group margin-top">
			<textarea v-model="remarks" placeholder="备注..."></textarea>
		</view>
		<view class="bottomRegion">
			<button @click="vacantHouse" type="primary">提交申请</button>
		</view>
	</view>
</template>

<script>
	import context from '../../lib/java110/Java110Context.js';
	const factory = context.factory;
	const constant = context.constant;
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker';
	export default {
		data() {
			return {
				name: "",
				phone: '',
				idNumber: '',
				remarks: '', //备注
				startDate: '请选择',
				endDate: '请选择',
				homeNumberIndex: 0,
				repairScopeIndex: 0,
				ownerInfo: {},
				// 用户信息
				userInfo: {},
				// 用户信息
				ownerFlag: false,
				// 是否有业主信息 标记 如果有为 true  没有为false
				roomDetail: {},
				// 已绑定房屋
				bindingHouseList: []
			}
		},
		components: {},
		props: {},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function() {
			this.proprietorPhone = uni.getStorageSync('userInfo').phone
			// 获取已绑定的房屋
			this.getbindingHouse()
		},

		methods: {
			// 获取已绑定的房屋
			getbindingHouse() {
				let that = this
				uni.request({
					url: constant.url.bindingHouse,
					header: context.getHeaders(),
					method: "GET",
					data: {
						phone: this.proprietorPhone
					},
					success: function(res) {
						console.log(res);
						that.bindingHouseList = res.data.result
						console.log(that.bindingHouseList, '已绑定房屋数据');
					},
					fail: function(e) {
						uni.hideLoading();
						uni.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			repairScopeChange: function(e) {
				console.log('改变费用完成')
				this.repairScopeIndex = e.target.value //取其下标
			},
			houseNumber: function(e) {
				console.log('改变费用完成')
				this.homeNumberIndex = e.target.value //取其下标
			},
			// 预约起始日期
			startDateChange: function(e) {
				this.startDate = e.detail.value
			},
			// 预约结束日期
			endDateChange: function(e) {
				this.endDate = e.detail.value
			},
			// 提交申请
			vacantHouse(e) {

				let obj = {
					remarks: this.remarks,
					houseId: this.bindingHouseList[this.homeNumberIndex].id,
					phone: this.proprietorPhone,
				}
				console.log("提交数据", obj);
				uni.request({
					url: constant.url.handoverApply,
					header: context.getHeaders(),
					method: "POST",
					data: obj,
					success: function(res) {
						console.log(res, 99999);
						if (res.data.code != 0) {

						} else {
							uni.navigateTo({
								url: './roomReservation'
							})
						}
						// if (res.statusCode == 200 && res.data.code == 0) {
						// 	uni.hideLoading();
						// 	uni.navigateBack();
						// 	return;
						// }
						// uni.hideLoading();
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: 'none',
						// 	duration: 2000
						// });
					},
					fail: function(e) {
						// uni.hideLoading();
						// uni.showToast({
						// 	title: "服务器异常了",
						// 	icon: 'none',
						// 	duration: 2000
						// })
					}
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	@import "@/pagesB/my/myHouseDetail.css";

	text {
		text-align: center;
	}

	.block__title {
		margin: 0;
		font-weight: 400;
		font-size: 14px;
		color: rgba(69, 90, 100, .6);
		padding: 40rpx 30rpx 20rpx;
	}

	.bottomRegion {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		button {
			margin: 15rpx;
			width: 400rpx;
			height: 70rpx;
			border-radius: 40rpx;
			font-size: 26rpx;
			line-height: 70rpx;
		}
	}
</style>
